<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>添加商品</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="addInfoBox">
                <el-form ref="formRef" :model="product" label-width="100px" :inline="true">
                    <el-form-item label="商品主图">
                        <el-upload action="aa" class="avatar-uploader" :on-change="proChange" :auto-upload="false"
                            accept="*" ref="addProduct_pic" :show-file-list="false">
                            <img v-if="product.product_pic" :src="product.imageUrl" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <br>
                    <el-form-item label="轮播图">
                        <el-upload action="aa" :on-remove="loopRemove" :on-change="loopChange" class="upload-demo"
                            multiple ref="loopList" :auto-upload="false" :file-list="fileList" list-type="picture">
                            <el-button size="small" icon="el-icon-upload">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    <br>
                    <el-form-item label="详情图">
                        <el-upload action="aa" :on-remove="picRemove" :on-change="picChange" class="upload-demo"
                            multiple ref="proList" :auto-upload="false" :file-list="fileList" list-type="picture">
                            <el-button size="small" icon="el-icon-upload">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    <br>
                    <el-form-item label="商品名称" prop="product_name"
                        :rules="{ required: true, message: '请填写商品名称', trigger: 'change' }">
                        <el-input v-model="product.product_name" size="small" placeholder="请填写商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="副标题" prop="product_title"
                        :rules="{ required: true, message: '请填写副标题', trigger: 'change' }">
                        <el-input v-model="product.product_title" size="small" placeholder="请填写副标题"></el-input>
                    </el-form-item>

                    <el-form-item label="排序" prop="new_word"
                        :rules="{ required: true, message: '请填写排序', trigger: 'change' }">
                        <el-input type="number" v-model.number="product.new_word" size="small"
                            placeholder="请填写排序"></el-input>
                        <div class="sortTip">tips：数值越大，在列表中越靠前，最小数值为1</div>
                    </el-form-item>
                    <el-form-item label="商品类型" prop="productFlag"
                        :rules="{ required: true, message: '请选择商品类型', trigger: 'change' }">
                        <el-radio-group v-model="product.productFlag">
                            <el-radio label="0">普通商品</el-radio>
                            <el-radio label="1">特殊商品</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <br>
                    <el-form-item label="库存" prop="inventory"
                        :rules="{ required: true, message: '请填写库存', trigger: 'change' }">
                        <el-input type="number" v-model="product.inventory" size="small" placeholder="请填写库存"></el-input>
                    </el-form-item>
                    <el-form-item label="展示价" prop="product_price"
                        :rules="{ required: true, message: '请填写展示价', trigger: 'change' }">
                        <el-input type="number" v-model="product.product_price" size="small"
                            placeholder="请填写展示价"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="金卡价" prop="manjianSt"
                        :rules="{ required: true, message: '请填写金卡价', trigger: 'change' }">
                        <el-input type="number" v-model="product.manjianSt" size="small"></el-input>
                    </el-form-item> -->
                    <el-form-item label="销量" prop="sales"
                        :rules="{ required: true, message: '请填写销量', trigger: 'change' }">
                        <el-input type="number" v-model="product.sales" size="small" placeholder="请填写销量"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类" prop="categroy_id"
                        :rules="{ required: true, message: '请选择商品分类', trigger: 'change' }">
                        <el-select v-model="product.categroy_id" placeholder="请选择商品分类" size="small">
                            <el-option v-for="item in cates" :key="item.categoryId" :label="item.categoryName"
                                :value="item.categoryId"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 占位符开始 -->
                    <div class="spec-item-top"></div>
                    <!-- 占位符结束 -->
                    <div class="btn-box">
                        <el-button size="small" icon="el-icon-plus" @click="addFormart">添加规格</el-button>
                    </div>
                    <div class="spec-item-top"></div>
                    <div class="spec-item" v-for="(item, index) in formarts" :key="index">
                        <el-form-item label="产品规格">
                            <el-input v-model="item.formart_name" size="small" placeholder="请输入规格名称"></el-input>
                        </el-form-item>

                        <el-form-item label="价格">
                            <el-input type="number" v-model="item.formart_price" size="small"
                                placeholder="请输入价格"></el-input>
                        </el-form-item>

                        <!-- <el-form-item label="股东价格">
                            <el-input type="number" v-model="item.format_VipPrice" size="small"
                                placeholder="请输入股东价格"></el-input>
                        </el-form-item> -->

                        <el-form-item label="库存">
                            <el-input type="number" v-model="item.formart_inventory" size="small"
                                placeholder="请输入库存"></el-input>
                        </el-form-item>
                        <el-form-item label="图片">
                            <el-upload action="aa" class="avatar-uploader"
                                :on-change="(file, fileList) => formartChange(file, fileList, index)"
                                :auto-upload="false" accept="*" ref="addFormart" :show-file-list="false">
                                <img v-if="item.formart_pic" :src="item.imageUrl" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <div class="btn-box" v-if="formarts.length > 1">
                            <el-button size="small" icon="el-icon-delete"
                                @click="deleteFormart(index)">删除此规格</el-button>
                        </div>
                    </div>

                </el-form>
            </div>

            <div class="bottomBtnBox">
                <el-button @click="submitAddDialog" type="primary" style="margin-right: 16px;">保存</el-button>
                <el-button @click="resHandle">重置</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import {
    listPropById,
    addProduct,
    addFormart,
    getCategroy,
} from "../../network/product";


export default {
    data() {
        return {
            form: {},
            proList: [],
            loopList: [],
            cates: [],
            formarts: [
                {
                    formart_name: "",
                    formart_price: "",
                    formart_inventory: "",
                    formart_pic: "",
                    imageUrl: "",
                    format_VipPrice: ""
                }
            ],
            product: {
                product_id: "",
                product_name: "",
                product_title: "",
                product_price: "",
                sales: '',
                categroy_id: "",
                inventory: "",
                product_detail: "",
                product_pic: "",
                imageUrl: "",
                prop: "",
                new_word: "",
                manjianSt: "",
                productFlag: '0',

            },
            fileList: [],
            propList: [],
            paras: [],
            formart: {
                formart_name: "",
                formart_price: "",
                inventory: "",
                formart_pic: "",
                imageUrl: ""
            },
            selectShopId: ''
        };
    },
    methods: {

        resHandle() {
            this.$router.go(0)
        },

        // 获取商品属性 分类 
        listCates() {

            // 分类
            getCategroy({
                shopId: sessionStorage.shop_id
            })
                .then(res => {
                    console.log(res);
                    this.cates = res.data;
                })
                .catch(err => {
                    console.log(err);
                });
        },



        // 提交添加弹窗
        submitAddDialog() {
            this.$refs.formRef.validate(valid => {
                if (!valid) return false;

                console.log(this.product);
                console.log(this.formarts);
                console.log(this.proList);
                console.log(this.loopList);

                // return

                var emptyFlag = false;
                this.formarts.forEach(ele => {
                    if (!emptyFlag) {
                        for (var i in ele) {
                            if (!emptyFlag) {
                                if (ele[i] == '') {
                                    console.log(1);
                                    emptyFlag = true
                                    return
                                }
                            }
                        }
                    }

                })

                if (emptyFlag) {
                    this.$message.warning('请填写规格信息')
                    return
                }
                console.log(122);


                console.log(this.product);

                let fd = new FormData();

                fd.append("productName", this.product.product_name);
                fd.append("shopId", this.selectShopId);
                fd.append("categoryId", this.product.categroy_id);
                fd.append("productTitle", this.product.product_title);
                fd.append("inventory", this.product.inventory);
                fd.append("productSort", this.product.new_word);
                fd.append("productSales", this.product.sales);
                fd.append("productStatus", 0);
                fd.append("productFlag", 0);
                fd.append("productPrice", this.product.product_price);


                fd.append("file", this.product.product_pic);

                fd.append("managerName", sessionStorage.manager_name);


                this.formarts.forEach((ele, index) => {
                    fd.append(`productFormats[${index}].formatName`, ele.formart_name);
                    fd.append(`productFormats[${index}].formatPrice`, ele.formart_price);
                    fd.append(`productFormats[${index}].formatInventory`, ele.formart_inventory);
                    // fd.append(`productFormats[${index}].formatSpecial`, ele.format_VipPrice);
                    fd.append(`productFormats[${index}].formatSpecial`, 0);
                });

                this.formarts.forEach((ele) => {
                    fd.append("formatPic", ele.formart_pic);
                });

                this.proList.forEach((item, index) => {
                    fd.append("detailPic", item);
                });

                this.loopList.forEach((item, index) => {
                    fd.append("bannerPic", item);
                });

                addProduct(fd).then(res => {
                    console.log(res);
                    if (res.flag) {
                        this.$message.success("商品上传成功");
                        this.$confirm('是否重置当前页面?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.resHandle()
                        }).catch(() => { });
                    } else {
                        console.log(res);
                        this.$message.success("上传失败");
                    }
                });
            });
        },



        proChange(file) {
            this.product.imageUrl = URL.createObjectURL(file.raw);
            this.product.product_pic = file.raw;
        },
        formartChange(file, fileList, i) {
            this.formarts[i].imageUrl = URL.createObjectURL(file.raw);
            this.formarts[i].formart_pic = file.raw;
        },
        forPicChange(file) {
            this.formart.imageUrl = URL.createObjectURL(file.raw);
            this.formart.formart_pic = file.raw;
        },
        picRemove(file, fileList) {
            let list = [];
            for (let i = 0; i < fileList.length; i++) {
                list.push(fileList[i].raw);
            }
            this.proList = list;
        },
        picChange(file, fileList) {
            let list = [];
            for (let i = 0; i < fileList.length; i++) {
                list.push(fileList[i].raw);
            }
            this.proList = list;
        },
        loopRemove(file, fileList) {
            let list = [];
            for (let i = 0; i < fileList.length; i++) {
                list.push(fileList[i].raw);
            }
            this.loopList = list;
        },
        loopChange(file, fileList) {
            let list = [];
            for (let i = 0; i < fileList.length; i++) {
                list.push(fileList[i].raw);
            }
            this.loopList = list;
        },
        addFormart() {
            let formart = {
                formart_name: "",
                formart_price: "",
                formart_inventory: "",
                formart_pic: "",
                imageUrl: ""
            };
            this.formarts.push(formart);
        },
        deleteFormart(index) {
            this.formarts.splice(index, 1);
        },
        selectProp(val) {
            listPropById({
                id: val
            }).then(res => {
                console.log(res);
                this.propList = res.data;
                this.paras = [];
                for (let i = 0; i < res.data.length; i++) {
                    this.paras.push({
                        parameter_name: res.data[i].ppName,
                        parameter_content: ""
                    });
                }
            });
        },


    },
    created() {
        this.selectShopId = sessionStorage.shop_id
        this.listCates();

        console.log(this.selectShopId);
    },

};
</script>

<style scoped>
.text-center {
    width: 100% !important;
    text-align: center !important;
}

.image-control {
    display: block;
    border-radius: 8px;
    width: 100px;
    height: 100px;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.mb-8 {
    margin-bottom: 8px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #dcdfe6;
    border-radius: 8px;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}

.spec-item-top {
    border-top: 1px dashed #dcdfe6;
    width: 100%;
    height: 20px;
}

.spec-item {
    width: 100%;
    border-bottom: 1px dashed #dcdfe6;
    margin-bottom: 20px;
}

.btn-box {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 20px;
}

.el-form {
    /* width: 100%; */
    padding-top: 10px;
}


.addInfoBox {
    width: 100%;
    height: 72vh;
    overflow-y: scroll;
}

.el-input {
    width: 220px;
}

.bottomBtnBox {
    padding-top: 30px;
    width: 100%;
}
</style>